<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>自适应宽高</title>
		 <style>
			 /* 尺寸间隔 屏幕宽高比不一致，限定一个宽高范围 
			  min-width属性：最小宽度     min-height：最小高度
			  max-width属性：最大宽度     max-height：最大高度
			  */
			 div{
				 width:80%;   /*默认宽度 */
				 min-width: 500px;         /*内容最小宽度是500px*/
				 max-width: 600px;    /* 页面尺寸:最小是500px，最大是600px，默认80% */
				 /* 定好最小跟最大宽度。PC：80% 300px
				                      移动：500~600宽度      
									  自适应
				*/
				 height: 300px;   
				 background: #bcee79;
			 }
            /* 
			html结构  外层div--.container     内层div--.box   写lorem+tab键
			css结构   .container 样式：背景颜色#f0f0f0
			                                  padding：20px;
											  文本居中
								box样式：背景颜色#4caf50;
										文字改下颜色：白色
										宽度60%
										宽度范围：500~600px【页面不变】	  
										margin:auto;
			*/
		   
		 </style>
	</head>
	<body>
		<div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Asperiores alias, inventore quos blanditiis ex repudiandae nisi velit veritatis recusandae, esse qui voluptatem aliquam iusto ab saepe ullam tempora! Deleniti, doloremque.
		</div>
		
	</body>
</html>